import React from 'react';
import ScrollArea from 'react-scrollbar';
import classNames from 'classnames';

import './Scroll.css';

class Scroll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      windowHeight: window.innerHeight,
    };
    this._onResize = this._handleResize.bind(this);
  }

  _handleResize(e) {
    this.setState({
      windowHeight: window.innerHeight,
    });
  }

  componentDidMount() {
    this._onResize();
    window.addEventListener('resize', this._onResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this._onResize);
  }

  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { name, children, height, fixedHeight, maxContentHeight, customStyle } = this.props;
    const scrollbarStyles = {
      borderRadius: 5,
    };


    let h = height;
    if (!height && (fixedHeight || maxContentHeight)) {
      h = Math.min(
        this.state.windowHeight - fixedHeight || Number.MAX_VALUE,
        maxContentHeight || Number.MAX_VALUE
      );
    }

    console.log(h)
    const scrollStyle = Object.assign(h ? {
      height: `${h}px`,
    } : {}, customStyle);

    return (
      <div className="Scroll">
        {/*
          * CSSでスタイルを適用する場合は、props.nameを設定し↓のように指定する
          *   .Scroll .scrollarea.name {
          *     height: 100px;
          *   }
          */}
        <ScrollArea
          ref="scrollArea"
          className={classNames('area', name)}
          style={scrollStyle}
          horizontal={false}
          verticalScrollbarStyle={scrollbarStyles}
          verticalContainerStyle={scrollbarStyles}
        >
          {children}
        </ScrollArea>
      </div>
    );
  }
}

/*Scroll.propTypes = {
  name: React.PropTypes.string,
  height: React.PropTypes.number,
  fixedHeight: React.PropTypes.number,
  maxContentHeight: React.PropTypes.number,
  customStyle: React.PropTypes.object,
};*/

export default Scroll
